// 组织架构
<template>
  <div class="departments-container">
    <el-card class="tree-card">
      <!-- 头部 -->
      <TreeTools
        :tree-node="company"
        :is-toot="true"
        @addDepts="addDepts"
      />
      <!-- /头部 -->
      <!-- 树形结构 -->
      <el-tree :data="departs" :props="defaultProps">
        <TreeTools
          slot-scope="{ data }"
          class="treeTools"
          :tree-node="data"
          @delDepts="getDepartments()"
          @addDepts="addDepts"
          @editDepts="editDepts"
        />
      </el-tree>
      <!-- /树形结构 -->
    </el-card>
    <!-- 添加/编辑子部门的弹出层 -->
    <AddDept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments" />
    <!-- <AddDept v-model="showDialog" :tree-node="node" @addDepts="getDepartments" /> -->
  </div>
</template>
<script>

import TreeTools from './components/tree-tools.vue'
import AddDept from './components/add-dept.vue'
import { getDepartments } from '@/api/departments'
import { tranListToTreeDate } from '@/utils'

export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      company: {
        name: '香飘飘人力资源管理有限公司',
        manager: '负责人',
        id: ''
      },
      departs: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      showDialog: false,
      node: null
    }
  },
  computed: {
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 获取部门方法
    async getDepartments() {
      const result = await getDepartments()
      this.departs = tranListToTreeDate(result.depts, '')
    },
    // 添加部门
    addDepts(node) {
      this.showDialog = true
      this.node = node
    },
    // 编辑部门
    editDepts(node) {
      this.showDialog = true
      this.node = node
      this.$refs.addDept.getDepartDetail(node.id)
    }
  }
}
</script>

<style scoped lang="scss">
.departments-container{
  padding: 15px;
  .tree-card{
  padding: 30px 140px;
  font-size: 14px;
  border: none;
  }
  ::v-deep .el-tree{
    max-height: 430px;
    overflow-y: auto;
    &::-webkit-scrollbar{
      width: 0 !important;
    }
    .el-tree-node{
      .el-tree-node__content{
        height: 40px;
      }
    }
  }
}

</style>
